import { StyleSheet, ScrollView, Alert, TextInput, Pressable } from 'react-native';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { useEffect, useState } from 'react';

import { Text, View } from '@/components/Themed';
import Colors from '@/constants/Colors';
import { useColorScheme } from '@/components/useColorScheme';

export default function ProfileScreen() {
  const colorScheme = useColorScheme();
  const [profile, setProfile] = useState({
    name: '张三',
    email: 'zhangsan@example.com',
    phone: '13800138000',
    avatar: '',
  });


  const handleSave = () => {
    Alert.alert('保存成功', '个人资料已更新');
  };

  const handleAvatarPress = () => {
    Alert.alert('选择头像', '请选择头像来源', [
      { text: '拍照', onPress: () => console.log('拍照') },
      { text: '相册', onPress: () => console.log('相册') },
      { text: '取消', style: 'cancel' },
    ]);
  };

  return (
    <ScrollView style={styles.container}>
      <View style={styles.content}>
        {/* 头像区域 */}
        <View style={styles.avatarSection}>
          <Pressable onPress={handleAvatarPress}>
            <View style={[styles.avatarContainer, { borderColor: Colors[colorScheme ?? 'light'].text }]}>
              {profile.avatar ? (
                <Text style={styles.avatarText}>头像</Text>
              ) : (
                <FontAwesome name="user" size={40} color={Colors[colorScheme ?? 'light'].text} />
              )}
            </View>
          </Pressable>
          <Text style={styles.avatarLabel}>点击更换头像</Text>
        </View>

        {/* 个人信息表单 */}
        <View style={styles.formSection}>
          <Text style={styles.sectionTitle}>基本信息</Text>

          <View style={styles.inputGroup}>
            <Text style={styles.inputLabel}>姓名</Text>
            <TextInput
              style={[styles.input, {
                color: Colors[colorScheme ?? 'light'].text,
                borderColor: Colors[colorScheme ?? 'light'].text + '20'
              }]}
              value={profile.name}
              onChangeText={(text) => setProfile({ ...profile, name: text })}
              placeholder="请输入姓名"
              placeholderTextColor={Colors[colorScheme ?? 'light'].text + '60'}
            />
          </View>

          <View style={styles.inputGroup}>
            <Text style={styles.inputLabel}>邮箱</Text>
            <TextInput
              style={[styles.input, {
                color: Colors[colorScheme ?? 'light'].text,
                borderColor: Colors[colorScheme ?? 'light'].text + '20'
              }]}
              value={profile.email}
              onChangeText={(text) => setProfile({ ...profile, email: text })}
              placeholder="请输入邮箱"
              placeholderTextColor={Colors[colorScheme ?? 'light'].text + '60'}
              keyboardType="email-address"
            />
          </View>

          <View style={styles.inputGroup}>
            <Text style={styles.inputLabel}>手机号</Text>
            <TextInput
              style={[styles.input, {
                color: Colors[colorScheme ?? 'light'].text,
                borderColor: Colors[colorScheme ?? 'light'].text + '20'
              }]}
              value={profile.phone}
              onChangeText={(text) => setProfile({ ...profile, phone: text })}
              placeholder="请输入手机号"
              placeholderTextColor={Colors[colorScheme ?? 'light'].text + '60'}
              keyboardType="phone-pad"
            />
          </View>
        </View>

        {/* 其他设置 */}
        <View style={styles.otherSection}>
          <Text style={styles.sectionTitle}>其他设置</Text>

          <View style={styles.settingItem}>
            <FontAwesome name="lock" size={20} color={Colors[colorScheme ?? 'light'].text} />
            <Text style={styles.settingText}>修改密码</Text>
            <FontAwesome name="chevron-right" size={16} color={Colors[colorScheme ?? 'light'].text} />
          </View>

          <View style={styles.settingItem}>
            <FontAwesome name="id-card" size={20} color={Colors[colorScheme ?? 'light'].text} />
            <Text style={styles.settingText}>实名认证</Text>
            <FontAwesome name="chevron-right" size={16} color={Colors[colorScheme ?? 'light'].text} />
          </View>
        </View>

        {/* 保存按钮 */}
        <Pressable style={styles.saveButton} onPress={handleSave}>
          <Text style={styles.saveButtonText}>保存修改</Text>
        </Pressable>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    padding: 16,
  },
  avatarSection: {
    alignItems: 'center',
    marginBottom: 30,
    paddingVertical: 20,
  },
  avatarContainer: {
    width: 80,
    height: 80,
    borderRadius: 40,
    borderWidth: 2,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#e0e0e0',
  },
  avatarText: {
    fontSize: 12,
    color: '#666',
  },
  avatarLabel: {
    marginTop: 10,
    fontSize: 14,
    color: '#666',
  },
  formSection: {
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 16,
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 16,
  },
  inputGroup: {
    marginBottom: 16,
  },
  inputLabel: {
    fontSize: 14,
    marginBottom: 8,
    color: '#333',
  },
  input: {
    borderWidth: 1,
    borderRadius: 6,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 16,
  },
  otherSection: {
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 16,
    marginBottom: 20,
  },
  settingItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  settingText: {
    flex: 1,
    fontSize: 16,
    marginLeft: 12,
  },
  saveButton: {
    backgroundColor: '#007AFF',
    borderRadius: 8,
    paddingVertical: 12,
    alignItems: 'center',
  },
  saveButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
});
